<template>
  <div>
    <!-- 汉界------------------------------------------------------------ -->
    <div>
      <el-card>
        <el-row type="flex" justify="end" class="btn_box">
          <el-button
            @click="add_gateway"
            class="el-icon-plus"
            type="success"
            size="mini"
            plain
          >&nbsp;&nbsp;添加网关</el-button>
          <el-button
            @click="add_camera"
            class="el-icon-plus"
            type="success"
            size="mini"
            plain
          >&nbsp;&nbsp;添加摄像头</el-button>
          <el-button
            @click="allot_gateway"
            class="el-icon-s-tools"
            type="warning"
            size="mini"
            plain
          >&nbsp;&nbsp;分配网关</el-button>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="info">
              <el-row>
                <el-button @click="unbound(info.row)" size="mini" type="info" plain>解除绑定</el-button>
                <el-button
                  @click="check_collector(info.row.serial)"
                  size="mini"
                  type="info"
                  plain
                >查看采集器</el-button>
                <el-button
                  @click="check_regionInfo(info.row.serial)"
                  size="mini"
                  type="info"
                  plain
                >区域信息</el-button>
                <el-button @click="check_camera(info.row.serial)" size="mini" type="info" plain>摄像头</el-button>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="网关名称"></el-table-column>
          <el-table-column prop="isOnline" label="在线状态">
            <template slot-scope="info">
              <el-tag :type="info.row.isOnline?'success':'info'">{{ info.row.isOnline?'在线':'离线' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lng" label="经度"></el-table-column>
          <el-table-column prop="lat" label="纬度"></el-table-column>
          <el-table-column prop label="操作">
            <template slot-scope="info">
              <el-button @click="up_gateway(info.row)" type="primary" icon="el-icon-edit" circle></el-button>
              <!-- <el-button @click="more_operator" type="warning" icon="el-icon-more" circle></el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- </el-table-column>
     </el-table>
    </el-card>-->

    <!-- 更多操作按钮之后的 弹窗 -->
    <!-- <el-dialog class title="操作列表" :visible.sync="dialog_more_operator" width="50%">
      <el-button type="info" plain>解除绑定</el-button>
    </el-dialog>-->
    <!-- 编辑信息弹出框· -->

    <el-dialog @close="close_gateway" title="编辑信息" :visible.sync="dialog_up_gateway" width="40%">
      <!-- <span>这是一段信息</span> -->
      <el-form ref="gateway_form" :model="gateway_form" label-width="80px">
        <el-form-item label="网关名称">
          <el-input v-model="gateway_form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="在线状态">
          <el-input v-model="gateway_form.isOnline"></el-input>
        </el-form-item>-->
        <el-form-item label="经度">
          <el-input v-model="gateway_form.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="gateway_form.lat"></el-input>
        </el-form-item>
        <el-form-item label="序列号">
          <el-input v-model="gateway_form.serial"></el-input>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="dialog_map_open(gateway_form)">查看地图</el-button>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_up_gateway = false">取 消</el-button>
        <el-button type="primary" @click="up_gateway_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 地图 -->
    <el-dialog
      @close="init_map"
      class="map_class_"
      title="地图"
      :visible.sync="dialog_map"
      width="50%"
    >
      <p class="lng_lat"></p>

      <div
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <map1 v-if="r_lock" :map_obj="map_obj" @lng_lat="lng_lat"></map1>
      </div>
    </el-dialog>
    <!-- 未分配网关 -->
    <el-dialog class title="未分配网关" :visible.sync="dialog_allot_ga" width="50%">
      <el-tooltip class="item" effect="dark" content="选择网关后再进行分配" placement="top">
        <el-button size="mini" @click="more_gateway_station" type="warning" plain>多选分配</el-button>
      </el-tooltip>
      <!-- @current-change="handleCurrentChange"
      "-->
      <el-table
        @select="select_station"
        highlight-current-row
        :data="allot_ga"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="name" label="网关名称"></el-table-column>
        <el-table-column prop="isOnline" label="在线状态">
          <template slot-scope="info">
            <el-tag :type="info.row.isOnline?'success':'info'">{{ info.row.isOnline?'在线':'离线' }}</el-tag>
          </template>
        </el-table-column>
        <!-- </el-table>
        </el-dialog>-->

        <!-- </el-table-column> -->
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <!-- <el-table-column prop label="操作">
          <template slot-scope="info1">
            <el-button
              @click="allot_gateway_station(info1.row.id)"
              type="warning"
              icon="el-icon-s-tools"
              size="mini"
              plain
            >分配至站点</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-dialog>
    <!-- 站点列表 -->
    <el-dialog
      @close="close_station_dillog"
      title="站点"
      :visible.sync="dialog_allot_station"
      width="30%"
    >
      <el-select class="station_select" v-model="form_s_g.sId" clearable placeholder="请选择">
        <el-option v-for="item in station_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_allot_station = false">取 消</el-button>
        <el-button type="primary" @click="allot_gateway_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 网管下采集器弹出框 -->
    <el-dialog :title="title_" :visible.sync="dialog_collector" width="60%">
      <el-table
        v-if="c_r_lock"
        v-loading="loading"
        :data="collector_list"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column prop="name" label="采集器名称"></el-table-column>
        <el-table-column prop="addr" label="采集器地址"></el-table-column>
        <el-table-column prop="gSerial" label="所属网关的序列号"></el-table-column>
        <el-table-column prop label="操作">
          <template slot-scope="info">
            <el-button size="mini" plain @click="up_collector(info.row)" type="primary">编辑</el-button>
            <el-button size="mini" plain @click="drive_ele(info.row)" type="info">驱动元素</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-if="!c_r_lock"
        v-loading="loading"
        :data="regionInfo_list"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column prop="regionName" label="区域名称"></el-table-column>
        <el-table-column prop="deviceRegion" label="区域号"></el-table-column>
        <el-table-column prop="gSerial" label="所属网关的序列号"></el-table-column>
        <el-table-column prop label="操作">
          <template slot-scope="info">
            <el-button size="mini" plain @click="up_collector(info.row)" type="primary">编辑</el-button>
            <el-button size="mini" @click="device(info.row)" type="primary">设备</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- </div>
    </template>-->

    <!-- </el-table-column> -->
    <!-- 点击编辑按钮弹出修改选项 -->
    <el-dialog :title="'编辑'+title_" :visible.sync="dialog_collector_up" width="40%">
      <el-form ref="form_collector" :model="form_collector" label-width="120px">
        <el-form-item :label="title_+'名称'">
          <el-input v-if="c_r_lock" v-model="form_collector.name"></el-input>
          <el-input v-else-if="!c_r_lock" v-model="form_collector.regionName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_collector_up = false">取 消</el-button>
        <el-button type="primary" @click="up_collector_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设备弹出框 -->
    <el-dialog title="设备" :visible.sync="dialog_device" width="80%">
      <el-table v-loading="loading" :data="device_list" border stripe style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column type="expand">
          <template slot-scope="info_sb">
            <el-button plain size="mini" type="primary" @click="device_up(info_sb.row)">编辑</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column label="是否在线">
          <template slot-scope="info_sb">
            <el-tag :type="info_sb.row.isOnline?'success':'info'">{{info_sb.row.isOnline?'在线':'离线'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否双路">
          <template slot-scope="info_sb">
            <el-tag
              :type="info_sb.row.isDoubleSwitch ?'success':'info'"
            >{{info_sb.row.isDoubleSwitch ?'双路':'单路'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="groupType" label="阈值类型">
          <template slot-scope="info_sb">
            <el-tag>{{groupType_obj [info_sb.row.groupType]}}</el-tag>
          </template>
          <!-- groupType_obj -->
        </el-table-column>
        <el-table-column prop="deviceType" label="设备类型">
          <template slot-scope="info_sb">
            <el-tag>{{deviceType_obj_s [info_sb.row.deviceType]}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="gSerial" label="所属网关"></el-table-column>
        <el-table-column prop="controllerAddr" label="所属控制地址"></el-table-column>

        <el-table-column prop="deviceAddr" label="设备地址"></el-table-column>
        <el-table-column prop="curStatu" label="设备状态">
          <template slot-scope="info_sb">
            <!-- <el-tag>{{controlType_obj [info_sb.row.controlType]}}</el-tag> -->
            <el-tag v-if="info_sb.row.isDoubleSwitch">{{ two_way[0][info_sb.row.curStatu] }}</el-tag>
            <el-tag v-if="!info_sb.row.isDoubleSwitch">{{ two_way[1][info_sb.row.curStatu] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="curData" label="状态数据">
          <template slot-scope="info_sb">
            <strong v-if="info_sb.row.isDoubleSwitch">{{ info_sb.row.curData |parseInt_curData}}%</strong>
          </template>
        </el-table-column>
        <el-table-column prop="deviceRegion" label="设备分区"></el-table-column>

        <el-table-column prop="controlType" label="控制类型">
          <template slot-scope="info_sb">
            <el-tag>{{controlType_obj [info_sb.row.controlType]}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 编辑设备名称 -->
    <el-dialog title="编辑" :visible.sync="dialog_device_up" width="40%">
      <el-form ref="form_device" :model="form_device" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="form_device.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_device_up = false">取 消</el-button>
        <el-button type="primary" @click="device_up_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 采集器下的驱动元素 -->
    <el-dialog title="驱动元素" :visible.sync="dialog_device_ele" width="60%">
      <el-table v-loading="loading" :data="drive_ele_list" border stripe style="width: 100%">
        <el-table-column prop="elementName" label="元素名称"></el-table-column>
        <el-table-column prop="elementSort" label="排序"></el-table-column>
        <el-table-column prop="elementUnit" label="单位"></el-table-column>
        <el-table-column prop="formula" label="公式"></el-table-column>
        <el-table-column prop="collectorAddr" label="所属采集器地址"></el-table-column>
        <el-table-column prop="gSerial" label="对应采集器网关"></el-table-column>
        <el-table-column prop="isMaster" label="是否主要元素">
          <template slot-scope="info_m">
            <el-tag :type="info_m.row.isMaster?'success':'info'">{{info_m.row.isMaster?"是":"否"}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 摄像头弹出框 -->
    <el-dialog title="摄像头" :visible.sync="dialog_camera" width="70%">
      <el-table :data="camera_list" border stripe style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="info">
            <el-button size="mini" @click="up_camera(info.row)" type="primary" plain>编辑</el-button>
            <el-button size="mini" @click="delect_camera(info.row.id)" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="摄像头名称"></el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop="playUrl" label="视频地址"></el-table-column>
        <el-table-column prop="serial" label="摄像头序列号"></el-table-column>
        <el-table-column prop="gSerial" label="所属网关"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 编辑摄像头弹出框 -->
    <el-dialog @close="close_up_camera" title="编辑" :visible.sync="dialog_up_camera" width="60%">
      <el-form ref="form_camera" :model="form_camera" label-width="100px">
        <el-form-item label="摄像头名称">
          <el-input v-model="form_camera.name"></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="form_camera.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="form_camera.lat"></el-input>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="form_camera.playUrl"></el-input>
        </el-form-item>
        <el-form-item label="摄像头序列号">
          <el-input v-model="form_camera.serial"></el-input>
        </el-form-item>
        <el-form-item label="所属网关">
          <el-select v-model="form_camera.gSerial" clearable placeholder="请选择">
            <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.name"
              :value="item.serial"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="dialog_map_open(form_camera)">查看地图</el-button>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_up_camera = false">取 消</el-button>
        <el-button type="primary" @click="camera_up_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 楚河------------------------------------------------------------- -->
  </div>
</template>

<script>
import map1 from "./map";
import Qs from "qs";
export default {
  components: {
    map1: map1
  },
  created() {
    this.one_data();
  },
  data() {
    return {
      tableData: [],
      //   网关编辑信息弹出框
      dialog_up_gateway: false,
      //   编辑表单
      gateway_form: {},
      loading: true,
      r_lock: false,
      // 地图使用的经纬度
      map_obj: {},
      //   地图弹出框
      dialog_map: false,
      //   未分配网关
      allot_ga: [],
      //   未分配网关弹出框
      dialog_allot_ga: false,
      //   站点id 和网关id
      form_s_g: {
        ids: []
      },
      //   所有站点名称
      station_list: [],
      //   站点弹出层
      dialog_allot_station: false,
      // 选择站点弹出框

      // // 提交网关id和 站点id
      // sId_gatewayid_: {
      //   ids: []
      // }
      // 是否多选状态
      more_sele: false,
      // 更多操作列表弹框
      dialog_more_operator: false,
      // 采集器弹出框
      dialog_collector: false,
      // 采集器数据
      collector_list: [],
      // 采集器编辑用的表单
      form_collector: {},
      // 编辑采集器信息 弹出开关
      dialog_collector_up: false,
      // 点击哪一行的网关序列号
      serial_: "",
      // 弹出框title
      title_: "采集器",
      // 采集器还是区域信息
      c_r_lock: true,
      // 区域信息数组
      regionInfo_list: [],
      // 添加网关状态
      add_gateway_lock: false,
      // 设备数组
      device_list: [],
      // 设备弹出框
      dialog_device: false,
      // 控制类型对象
      groupType_obj: {
        "54": "温度",
        "48": "湿度",
        "49": "光照强度",
        "53": "土壤湿度",
        "43": "补气"
      },
      deviceType_obj: [
        { name: "风机", val: "00" },
        { name: "循环风机", val: "01" },
        { name: "天窗", val: "02" },
        { name: "侧窗", val: "03" },
        { name: "外遮阳", val: "04" },
        { name: "内遮阳", val: "05" },
        { name: "湿帘", val: "06" },
        { name: "水泵", val: "07" },
        { name: "电磁阀", val: "08" },
        { name: "脉冲电磁阀", val: "09" },
        { name: "灯", val: "10" },
        { name: "加热阀", val: "11" },
        { name: "补气阀", val: "12" },
        { name: "卷膜", val: "13" },
        { name: "卷被", val: "14" }
      ],
      // 展示
      deviceType_obj_s: {
        "00": "风机",
        "01": "循环风机",
        "02": "天窗",
        "03": "侧窗",
        "04": "外遮阳",
        "05": "内遮阳",
        "06": "湿帘",
        "07": "水泵",
        "08": "电磁阀",
        "09": "脉冲电磁阀",
        "10": "灯",
        "11": "加热阀",
        "12": "补气阀",
        "13": "卷膜",
        "14": "卷被"
      },
      controlType_obj: {
        "00": "本地",
        "01": "手动",
        "02": "逻辑",
        "03": "定时"
      },
      // 双路设备的正转反转
      two_way: [
        {
          "64": "正转",
          "00": "反转",
          AA: "停止"
        },
        {
          "64": "开启",
          "00": "关闭"
        }
      ],
      // 选择的设备
      device_name: "",
      // 设备编辑弹出框
      dialog_device_up: false,
      // 设备编辑提交的表单
      form_device: {},
      // 网关序列号和 区域号
      gSerial_dev: {},
      // 采集器下驱动元素弹出框
      dialog_device_ele: false,
      // 驱动元素 列表
      drive_ele_list: [],
      // 摄像头弹出框
      dialog_camera: false,
      // 摄像头列表
      camera_list: [],
      // 编辑摄像头表单
      form_camera: {},
      // 编辑摄像头弹出框
      dialog_up_camera: false,
      // 当前网关
      camera_c_station: {},
      // 摄像头地图开关
      camera_map_lock: false,
      // 摄像头 添加开关
      add_camera_lock: false
    };
  },
  filters: {
    parseInt_curData: function(value) {
      return parseInt(value, 16);
    }
  },
  // computed: {
  //   parseInt_curData() {

  //   }
  // },
  methods: {
    // 点击删除摄像头
    delect_camera(id) {
      this.$confirm("此操作将永久删除该摄像头, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          let { data: res } = await this.$http.delete(`/cameraG/delete/${id}`);
          if (!this.msg(res)) return;
          this.check_camera(this.serial_);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击添加摄像头
    add_camera() {
      this.add_camera_lock = true;
      this.up_camera(this.form_camera);
    },
    // 编辑摄像头 关闭时 地图还给网关
    close_up_camera() {
      this.camera_map_lock = false;
      this.form_camera = {};
      this.add_camera_lock = false;
    },
    // 确定提交编辑后的摄像头信息
    async camera_up_s() {
      var url = "/cameraG/update";
      if (this.add_camera_lock) {
        url = "/cameraG/add";
      }
      let { data: res } = await this.$http.put(url, this.form_camera);

      if (!this.msg(res)) return;
      this.dialog_up_camera = false;
      this.check_camera(this.serial_);
    },
    // 编辑摄像头
    up_camera(obj) {
      this.camera_map_lock = true;
      this.form_camera = obj;
      this.dialog_up_camera = true;
      //
    },
    // 点击获取摄像头
    async check_camera(serial) {
      this.serial_ = serial;
      let { data: res } = await this.$http(`/cameraG/listByGSerial/${serial}`);
      this.camera_list = res.datas;
      this.dialog_camera = true;
      // this.loading  = false
    },
    // 点击获取驱动元素
    async drive_ele(obj) {
      var a = {
        gSerial: obj.gSerial,
        addr: obj.addr
      };
      let { data: res } = await this.$http.post(
        "/driveElement/listByGSerial",
        Qs.stringify(a)
      );

      this.dialog_device_ele = true;
      this.drive_ele_list = res.datas;
      //

      //
    },
    // 点击确定提交设备名称
    async device_up_s() {
      let { data: res } = await this.$http.put(
        "/device/update",
        this.form_device
      );

      if (!this.msg(res)) return;
      this.dialog_device_up = false;
      this.device(this.gSerial_dev);
    },
    // 点击编辑设备名称弹出 框
    device_up(name) {
      this.form_device = name;
      this.dialog_device_up = true;
    },

    // 点击弹出设备 弹出框
    async device(obj) {
      this.gSerial_dev = {
        gSerial: obj.gSerial,
        deviceRegion: obj.deviceRegion
      };
      let { data: res } = await this.$http.post(
        "/device/listByRegion",
        Qs.stringify(this.gSerial_dev)
      );
      this.device_list = res.datas;
      this.dialog_device = true;
    },
    // 点击添加网关
    async add_gateway() {
      // 开启器添加网关状态
      this.add_gateway_lock = true;
      this.up_gateway(this.gateway_form);
    },
    // 点击弹出区域信息的表格 与采集器公用一个表格
    async check_regionInfo(serial) {
      // 打开采集器弹出层
      this.dialog_collector = true;
      // 修改标题为区域信息
      this.title_ = "区域信息";
      // 发送请求 拿到区域信息数据
      let { data: res } = await this.$http(`/regionInfo/list/${serial}`);
      // 放到表格可以使用的地方
      this.regionInfo_list = res.datas;
      // 开启区域信息 隐藏采集器信息
      this.c_r_lock = false;
      // 停止加载动画
      this.loading = false;
    },
    // 确定提交编辑后的内容
    async up_collector_s() {
      var url = "/collector/update";
      if (!this.c_r_lock) {
        url = "/regionInfo/update";
      }
      let { data: res } = await this.$http.put(url, this.form_collector);
      if (!this.msg(res)) return;
      this.dialog_collector_up = false;
      if (!this.c_r_lock) {
        return this.check_regionInfo(this.serial_);
      }
      this.check_collector(this.serial_);
    },
    // 点击编辑采集器 弹出框
    up_collector(obj) {
      this.form_collector = obj;
      this.dialog_collector_up = true;
      //
    },
    // 点击获取该网关下采集器
    async check_collector(serial) {
      this.title_ = "采集器";
      this.dialog_collector = true;
      this.serial_ = serial;
      //
      let { data: res } = await this.$http(
        `/collector/listByGSerial/${serial}`
      );
      this.collector_list = res.datas;
      this.loading = false;
      this.c_r_lock = true;
      //
    },
    // handleCurrentChange(a,b) {
    //
    //

    // },
    // 点击解除绑定
    async unbound(obj) {
      let { data: res1 } = await this.$http(
        `/station/getStationById/${obj.sId}`
      );
      // console.log(obj);

      // console.log(res1);

      this.$confirm(
        `此操作将永久解除 ${obj.name}(网关) 与 ${
          res1.data.name
        }(站点), 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          let { data: res } = await this.$http(`/gateWay/release/${obj.id}`);

          if (!this.msg(res)) return;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      this.one_data();
    },

    // more_operator() {},
    // 多选按钮被点击 开启选状态
    more_gateway_station() {
      this.more_sele = true;
      this.allot_gateway_station();
    },
    // 多选框事件
    select_station(gateway_arr) {
      this.form_s_g.ids = [];
      gateway_arr.forEach(item => {
        this.form_s_g.ids.push(item.id);
      });
      // console.log(this.form_s_g);
    },
    // 选择站点弹出框关闭
    close_station_dillog() {
      // this.form_s_g = {
      //   ids: []
      // };
      this.allot_gateway();
      this.more_sele = false;
    },
    //   确定分配至该站点
    async allot_gateway_s() {
      let { data: res } = await this.$http.post(
        "/gateWay/connectToStation",
        this.form_s_g
      );
      // console.log(this.form_s_g);

      // console.log(res);

      if (!this.msg(res)) return;

      this.dialog_allot_station = false;
    },
    //   分配至站点
    async allot_gateway_station(id) {
      let { data: res } = await this.$http("/station/list");

      // if (!this.msg(res)) return;
      this.station_list = res.datas;
      this.dialog_allot_station = true;

      if (this.more_sele) {
        return false;
      }
      this.form_s_g.ids = [];

      // this.form_s_g.ids[0] = id;
    },
    //   分配网关
    async allot_gateway() {
      let { data: res } = await this.$http("/gateWay/listUnbind");
      this.allot_ga = res.datas;
      this.dialog_allot_ga = true;
    },
    //   提交修改完的数据
    async up_gateway_s() {
      if (!this.lat_90_lng_180(this.gateway_form)) return;
      var url = "/gateWay/update";
      if (this.add_gateway_lock) {
        url = "/gateWay/add";
      }

      let { data: res } = await this.$http.put(url, this.gateway_form);
      if (!this.msg(res)) return;
      //   获取 最新数据
      this.one_data();
      //   关闭弹出层
      this.dialog_up_gateway = false;
    },
    // 一个弹出提示信息的方法
    msg(res) {
      if (res.status == 0) {
        this.$message.success(res.msg);
        return true;
      } else {
        this.$message.error(res.msg);
        // window.location.reload();
        return false;
      }
    },
    //   关闭时清除上一个marker
    close_gateway() {
      // 关闭添加状态
      this.add_gateway_lock = false;
      // 每次编辑完都 清空表单 ，为添加操作准备
      this.gateway_form = {};
      // 不传经纬度
      // this.map_obj = null
      this.one_data();
    },
    // 初始化地图 清除marker标
    init_map() {
      this.r_lock = false;
      this.map_obj = null;
    },
    // 地图传过来的经纬度
    lng_lat(e) {
      //
      if (!e.lng) {
        e.lng = 0;
        e.lat = 0;
      }
      var form_ = this.gateway_form;
      if (this.camera_map_lock) {
        form_ = this.form_camera;
      }
      form_.lng = e.lng;
      form_.lat = e.lat;

      // 点击时候做一个提示p标签
      document.querySelector(".lng_lat").innerHTML = `已选择 经度：${
        e.lng
      },纬度：${e.lat}`;
    },
    // 点击选择经纬度 地图初始化
    dialog_map_open(e) {
      var _this = this;
      this.r_lock = true;
      this.dialog_map = true;
      this.map_obj = {
        lng: e.lng,
        lat: e.lat
      };
      setTimeout(() => {
        this.lng_lat(e);
        this.loading = false;
      }, 1000);
    },
    //   点击弹出对话框
    up_gateway(obj) {
      this.gateway_form = obj;
      this.dialog_up_gateway = true;
    },
    // 验证经纬度方法
    lat_90_lng_180(obj) {
      if (obj.lat > 90 || obj.lat < -90 || obj.lng > 180 || obj.lng < -180) {
        this.$message.error("请正确填写经纬度");
        return false;
      } else {
        return true;
      }
    },
    //   首屏数据
    async one_data() {
      let { data: res } = await this.$http("/gateWay/list");
      this.tableData = res.datas;
    }
  }
};
</script>

<style lang='less' scoped>
span {
  background-color: #f0eaea;
}
</style>
